<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lip唇印</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="js/jquery-3.2.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/btn.css" rel="stylesheet" media="screen">
    <style>
        html,body{
            height:100%;
            background-image: url(pto/planC.png);
            background-image: 50%;
            background-repeat: no-repeat;
            background-position:50% 50%;
            background-size: cover;
        } 
        #div1{
            /*background-color: white;*/
            height:100%;
            border-left: rgba(0, 0, 0, 0.5) 2px solid;
            width: 400px;
            float: right;
            -webkit-box-shadow:0 0 15px rgba(144, 144, 144, 1);  
            box-shadow:0 0 15px rgba(144, 144, 144, 1); 

        }
        .form-1{
            margin-top: 0%;
        }
        .well{
            width: 100%;
            /*background-color: white;*/
            background-color: transparent;
            border: 0px;

        }
        .form-control {
            -webkit-box-shadow:0px 0px 0px #000 inset;
            box-shadow: 0px 0px 0px #000 inset;
            margin-top: 10px;
            -webkit-border-radius: 0px;
            border-radius:0px;
            border:1px solid white ;
            border-bottom:1px solid black; /* 下划线 */
            background-color:transparent; /* 背景透明 */
            /*background-color:white;  背景白色 */
        }
        .nav-1{
            padding-left: 20px;
            padding-right: 50px;
            padding-top: 0px;
            
        }

        .body-1{
            padding-bottom: 20px;
        }
        .body-2{
            background-image: url(pto/11.jpg);

        }
        .navbar{
            margin-top: 20px;
            background-color: white;
            border: 0px;
        }
        .footer-1{
            padding-top: 50px;
            color:rgba(255, 255, 255, 0.5);
            background-color:rgba(25, 24, 22, 1);
        }
        .footer-2{
            text-align: center;
        }
        .BTN{
            padding-left: 20%;
        }
        .outSideBTN{
            width: 20%;
            height: 50px;
        }
        .outSideBTN-2{
            width: 30%;
            height: 100%;
        }
        .outSideBTN-4{
            margin-top: 8%;
            margin-left: 10%;
            width: 80%;
            height: 100%;
            background-color: white;
            color: rgba(168, 40, 53, 1);
        }
        .outSideBTN-5{
            border: rgba(168, 40, 53, 1) 1px solid;
            width: 100%;
            height: 100%;
            -webkit-border-radius: 0px;
            border-radius:0px;
        }
        .outSideBTN-6{
            border: rgba(168, 40, 53, 1) 1px solid;
            width: 100%;
            height: 100%;
            -webkit-border-radius: 0px;
            border-radius:0px;
            background-color: white;
            color: rgba(168, 40, 53, 1);
        }
        a:visited {
            text-decoration:none;
        }
        .thu-1{
            border: 0px;
        }
        .sidebar .widget
        {
            background: #ffffff;
            padding: 21px 30px;
        }
        .main-footer .widget
        {
            padding: 0px 30px;
        }
        .widget
        {
            margin-bottom: 35px;
        }
        .widget .title
        {
            margin-top: 0;
            padding-bottom: 7px;
            border-bottom: 1px solid #ebebeb;
            margin-bottom: 21px;
            position: relative;
        }
        .widget .title:after
        {
            content: "";
            width: 90px;
            height: 1px;
            background: rgba(203,64,66, 1);
            position: absolute;
            left: 0;
            bottom: -1px;
        }
        .tab-1{
            padding-top: 50px;
            padding-bottom: 50px;
        }
        .fenge-1{
            padding-top: 30px;
            padding-bottom: 50px;
        }
        .banquan-1{
            /*background-color: cornflowerblue;*/
            color:white;
            background-color:rgba(168, 40, 53, 1);
        }
    </style>


</head>
<body>
<div id="div1">
    <div class="container-fluid form-1">
        <div class="row">
        <div class=" ">
        <div class="well">
            <form action="" class="form-horizontal" method="post" role="form">
                        <!--表单标题-->
                        <input name="" type="hidden" value="" /><h2>Log in.</h2><hr/>
                        <!--输入邮箱-->
                        <div class="form-group">
                            <!--<label class="col-md-3 control-label" for="Email">Email:</label>-->
                            <div class="col-md-12 ">
                                <input class="form-control " data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" type="text" value=""placeholder="Email" />
                                <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
                            </div>
                        </div>
                        <!--输入密码-->
                        <div class="form-group">
                            <!--<label class="col-md-3 control-label" for="Password">Password:</label>-->
                            <div class="col-md-12 ">
                                <input class="form-control " data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" placeholder="Password" />
                                <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
                            </div>
                        </div>
                        <!--记住邮箱和密码-->
                        <div class="form-group">
                            <div class="col-md-9 ">
                                <div class="checkbox">
                                    <label>
                                        <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true" />
                                        <input name="RememberMe" type="hidden" value="false" />
                                        Remember me?
                                    </label>
                                </div>
                            </div>
                        </div>
                        <!--提交按钮-->
                        <div class="form-group">
                            <div class="col-md-6">
                                <input type="submit" value="Log in" class="btn button button-1 outSideBTN-5" />
                            </div>
                            <div class="col-md-6">
                                <input type="reset" value="Reset" class="btn button button-2 outSideBTN-6" />
                            </div>
                        </div>
                <hr/>
                        <!--忘记密码-->
                        <div class="form-group">
                            <div class="col-md-offset-3 col-md-9">
                                <a href=" ">Forgot your password?</a>
                            </div>
                        </div>
            </form>        
        </section>
            <a href="index.html" role="button" class="btn button button-2  outSideBTN-4" >Back to Home</a>
        </div>
        </div>


        <br/>
    </div>
</div>
</div>
</body>
</html>